<template>
  <form-item-wrapper
    :designer="designer"
    :field="field"
    :rules="rules"
    :design-state="designState"
    :parent-widget="parentWidget"
    :parent-list="parentList"
    :index-of-parent-list="indexOfParentList"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :sub-form-row-id="subFormRowId"
  >
    <el-tree
      :data="tableData"
      :props="defaultProps"
      :default-expand-all="treeED.expand"
      :accordion="treeED.accordion"
      :filter-node-method="filterNode"
      :ref="options.name"
      @node-click="handleNodeClick"
    >
    </el-tree>
  </form-item-wrapper>
</template>

<script>
import FormItemWrapper from "./form-item-wrapper";
import emitter from "@/utils/emitter";
import i18n, { translate } from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

import { EventBus } from "@/components/javaScript/EventBus";

export default {
  name: "tree-widget",
  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件
  mixins: [emitter, fieldMixin, i18n],
  props: {
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,

    designState: {
      type: Boolean,
      default: false,
    },

    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
  },
  components: {
    FormItemWrapper,
  },
  inject: ["refList", "formConfig", "globalOptionData", "globalModel"],
  data() {
    return {
      oldFieldValue: null, //field组件change之前的值
      fieldModel: [],
      rules: [],
      tableData: [],
      filterText: '',
      defaultProps: {
        children: "children",
        label: "label",
      },

    };
  },
  computed: {
    options() {
      return this.field.options;
    },
    treeED() {
      return this.field.options.treeED;
    },
    setHeight() {
      if (this.designState) {
        return "auto";
      }
      let h = document.querySelector("body").offsetHeight
        ? document.querySelector("body").offsetHeight
        : 500;
      return 500 + "px";
    },
  },
  beforeCreate() {
    /* 这里不能访问方法和属性！！ */
  },

  created() {
    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
           需要在父组件created中初始化！！ */
    this.initFieldModel();
    this.registerToRefList();
    this.initEventHandler();
    this.buildFieldRules();

    this.handleOnCreated();
  },

  mounted() {
    let that = this;
    this.handleOnMounted();
    this.setTableData(this.dataSourceMapData);
    this.setPropers();
    EventBus.$on(this.options.dataSource, () => {
      that.setTableData(that.dataSourceMapData);
    });
  },

  beforeDestroy() {
    this.unregisterFromRefList();
  },

  methods: {
    setPropers(){
      const {label,children}=this.field.options.treeED;
      this.defaultProps={
        ...this.defaultProps,
        label,
        children,
      }
    },
    bindFun(type, data) {
      if (this.designState) {
        //设计状态不触发点击事件
        return;
      }
      if (this.field.options[type]) {
        this.$emit("childEvent", this.field.options[type], data);
      }
    },
    handleNodeClick(row) {
      if (this.designState) {
        //设计状态不触发点击事件
        return;
      }
      if (this.field.options.handleNodeClick) {
        this.$emit("childEvent", this.field.options.handleNodeClick, row);
      }
    },
    setTableData(v) {
      if (this.options.dataSource && v && v[this.options.dataSource]) {
        this.$set(this, "tableData", v[this.options.dataSource]);
        // this.tableData = v[this.options.dataSource]
      } else {
        this.tableData = this.fieldModel;
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

  },
  watch: {
    tableData: {
      handler(v) {
        if (v && v.length > 0) {
          this.$emit("formModel", this.options.name, v);
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/global.scss";
</style>
